<template>
	<view>
		<view class="top">
			<view class="image1">
				<view class="buttom">
					<view style="margin-bottom:32rpx ;">
						<view class="l1">
							姓名
						</view>
						<view class="bold">
							{{name}}
						</view>
					</view>
					<view class="">
						<view class="l2">
							身份证号
						</view>
						<view class="bold">
							{{idcard}}
						</view>
					</view>
				</view>
				<!-- <image src="/static/card.png" style="margin: auto;width: 100%;height: 100%;"></image> -->
			</view>
			<view class="text">
				安全保障中
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.init()
		},
		data() {
			return {
				name: '',
				idcard: ''
			}
		},
		methods: {
			init() {
				let _this = this
				this.$http('api/user/userInfo').then(res => {
					_this.name = res.name
					_this.idcard = res.card
					// console.log(res)
				})
			},
			noPassByName(str) {
				let aaa = str.length
				// console.log(aaa,str)
				if (aaa = 2) {
					return str.replace(/^(.).+$/, "$1*")
				} else if (aaa = 3) {
					return str.replace(/^(.).+(.)$/, "$1*$2")
				} else if (aaa > 3 && aaa < 6) {
					return /^(.{2}).+(.)/, "$1**$2"
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bold {
		font-size: 36rpx;
		font-weight: bold;
	}

	.top {
		width: 100%;
		// display: flex;
		// justify-content: center;
		margin-bottom: 50rpx;

		.image1 {
			padding: 40rpx;
			background: url("@/static/card.png") no-repeat;
			background-size: 100% 100%;
			width: 686rpx;
			height: 330rpx;
			margin: 50rpx auto;
		}

		.text {
			width: 100%;
			text-align: center;
			color: #000;
			font-weight: bold;
			font-size: 34rpx;
		}
	}

	.buttom {
		width: 680rpx;
		margin-left: 35rpx;

		.t1,
		.t2 {
			display: flex;
			margin-bottom: 35rpx;
			padding: 0 15rpx;
			justify-content: space-between;
			// border-bottom: 1rpx solid #5b595a;
			font-size: 32rpx;
			color: #000000;
		}
	}
</style>
